<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>权限编辑</title>
  {% include 'rbac/common/add-edit-header.html' %}
</head>
<body>

<form
  class="layui-form"
  lay-filter="rights-form"
  id="rights-form"
  style="padding: 15px;"
>
  <div class="layui-form-item">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="id"
        autocomplete="off"
        class="layui-input"
        value="{{ edit_obj.id }}"
        disabled
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">权限类型</label>
    <div class="layui-input-block">
      <input
        type="radio"
        name="kind"
        value="menu"
        title="菜单"
        lay-filter="form-rights-filter"
        {% if edit_obj.kind == "menu" %}
        checked
        {% endif %}
      />
      <input
        type="radio"
        name="kind"
        value="menu-z"
        title="节点"
        lay-filter="form-rights-filter"
        {% if edit_obj.kind == "menu-z" %}
        checked
        {% endif %}
      />
      <input
        type="radio"
        name="kind"
        value="auth"
        title="权限"
        lay-filter="form-rights-filter"
        {% if edit_obj.kind == "auth" %}
        checked
        {% endif %}
      />
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">权限名</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="title"
        lay-verify="required"
        placeholder="请输入权限名"
        autocomplete="off"
        class="layui-input"
        value="{{ edit_obj.title }}"
      />
    </div>
  </div>
  <div class="layui-form-item" style="display: none;">
    <label class="layui-form-label">权限标识</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="code"
        autocomplete="off"
        placeholder="请输入权限标识"
        class="layui-input"
        value="{{ edit_obj.code|default:'' }}"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label for="" class="layui-form-label">图标</label>
    <div class="layui-input-block">
      <!-- {{ edit_obj.icon_sign|slice:'11:' }}  去掉前面的"layui-icon "-->
      <input
        type="text"
        id="iconPicker"
        name="icon_sign"
        lay-filter="iconPicker"
        value="{{ edit_obj.icon_sign|slice:'11:' }}"
        style="display: none;"
      >
    </div>
  </div>
  <div class="layui-form-item" style="display: none;">
    <label class="layui-form-label">访问地址</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="url"
        lay-verify=""
        placeholder="请输入访问地址"
        autocomplete="off"
        class="layui-input"
        value="{{ edit_obj.url|default:'' }}"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block">
      <input
        type="checkbox"
        name="is_enabled"
        lay-skin="switch"
        lay-filter="rights-row-status"
        title="启用|禁用"
        {% if edit_obj.is_enabled %}
        checked
        {% endif %}
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">排序</label>
    <div class="layui-input-inline">
      <input
        type="text"
        name="sort"
        placeholder=""
        autocomplete="off"
        class="layui-input"
        value="{{ edit_obj.sort }}"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">打开方式</label>
    <div class="layui-input-inline">
      <select name="open_type" id="">
        <option value="">请选择</option>
        <option
          value="_iframe"
          {% if edit_obj.open_type == "_iframe" %} selected {% endif %}>内部打开(默认)
        </option>
        <option
          value="_blank"
          {% if edit_obj.open_type == "_blank" %}selected{% endif %}>新窗口
        </option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">父元素 ID</label>
    <div class="layui-inline">
      <div id="rights-pid-select"
           lay-tips="规则怪谈：权限类型可为三种 - 菜单、节点、权限<br>
                     1>菜单 - 可选: 可以放到任意层级的菜单下,也可以不选则自己作为顶级菜单<br>
                     2>节点 - 必须选: 节点可以放到已有的任意层级的菜单下<br>
                     3>权限 - 必须选: 权限都必须放到节点下!!<br>
                     ps: 树的最后一层可能是未添加节点的菜单,也可能是节点.">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-block">
      <textarea name="remark" class="layui-textarea">{{ edit_obj.remark|default:'' }}</textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button
        type="submit"
        class="layui-btn"
        lay-submit
        lay-filter="rights-edit-form-btn"
      >
        立即提交
      </button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</body>
{% include 'rbac/common/add-edit-footer.html' %}
<script>
  let token = "{{ csrf_token }}";
  solve_csrf(token)

  layui.use(["form", "button", "popup", 'iconPicker', 'combotree'], function () {
    let form = layui.form;
    let popup = layui.popup;
    let $ = layui.$;
    let iconPicker = layui.iconPicker;  // 图标选择器
    let combotree = layui.combotree;  // pid 下拉选择


    // pid 下拉选择
    let combotree_elem = '#rights-pid-select'
    let combotree_url = '/api/v1/rights/get_rights_pid_select/'
    let combotree_initValue = "{{ edit_obj.pid_id }}"; // 这里的值将在后端渲染为对应的值
    combotree_init(combotree, combotree_elem, combotree_url, combotree_initValue)

    // 图标选择器
    let iconPicker_elem = '#iconPicker'
    iconPicker_init(iconPicker, iconPicker_elem)

    // 我们将switch判断提取到一个函数中,以便复用 - 根据类型隐藏/显示某些表单项+控制必填
    function handleRadioSwitch(value) {
      switch (value) {
        case "menu":
          $('[name="icon_sign"]').parent().parent().show();
          $('[name="code"]').parent().parent().hide();
          $('[name="url"]').parent().parent().hide();
          $('[name="code"]').removeAttr('lay-verify');
          $('[name="url"]').removeAttr('lay-verify');
          break;
        case "menu-z":
          $('[name="icon_sign"]').parent().parent().hide();
          $('[name="code"]').parent().parent().show();
          $('[name="url"]').parent().parent().show();
          $('[name="code"]').attr('lay-verify', 'required');
          $('[name="url"]').attr('lay-verify', 'required');
          break;
        case "auth":
          $('[name="icon_sign"]').parent().parent().hide();
          $('[name="code"]').parent().parent().show();
          $('[name="url"]').parent().parent().show();
          $('[name="code"]').attr('lay-verify', 'required');
          $('[name="url"]').attr('lay-verify', 'required');
          break;
      }
    }

    // 因为实现了表单的默认填充,所以表单一开始就进行了权限类型的单选的,so这里需要初始化一下-执行handleRadioSwitch函数
    let initRadioValue = "{{ edit_obj.kind }}";
    handleRadioSwitch(initRadioValue);

    // 监听类型切换 > 根据切换隐藏显示某些表单项+控制必填
    form.on("radio(form-rights-filter)", function (data) {
      let elem = data.elem; // 获得 radio 原始 DOM 对象
      let value = elem.value; // 获得 radio 值
      handleRadioSwitch(value);
    });

    // 表单提交
    form.on("submit(rights-edit-form-btn)", function (data) {
      data.field.icon_sign = "layui-icon " + data.field.icon_sign
      data.field.is_enabled = data.field.is_enabled === "on";
      data.field.pid = data.field["rights-pid-select"];  // 给data.field新增pid字段

      let url = "/api/v1/rights/edit/"
      let d = data.field
      let reload_table = "rights-treeTable"
      addAndEditAjaxRequest(popup, url, d, reload_table)
      return false;
    })
  })
</script>
</html>
